import request from '@/utils/request';
import { getToken } from '@/utils/token';
import { Button, message, Upload } from 'antd';
import { useEffect, useState } from 'react';
import Stations from './Stations';
import styles from './index.less';

const StationInfo = (props) => {
  const { value, lineId } = props;
  const [data, setData] = useState({
    emptyStations: [],
    heavyStations: [],
  });

  useEffect(() => {
    setData({
      emptyStations: value?.filter?.((item) => item.direction === 0) ?? [],
      heavyStations: value?.filter?.((item) => item.direction === 1) ?? [],
    });
  }, [value]);
  const handleExport = async () => {
    const res = await request({
      url: '/datas/line/station/export/list',
      method: 'GET',
      params: {
        lineId,
      },
    });
    if (res) {
      window.open(res);
    }
  };
  const handleSave = async () => {
    await request({
      url: '/datas/line/stations/add',
      method: 'POST',
      data: {
        lineId,
        emptyStations: data.emptyStations,
        heavyStations: data.heavyStations,
      },
    });
    message.success('保存成功');
  };
  return (
    <div className={styles.stationInfo}>
      <header className={styles.header}>
        <Upload
          name="file"
          action="/datas/line/import/stations"
          showUploadList={false}
          headers={{
            token: getToken(),
          }}
          onChange={(info) => {
            if (info?.file?.status === 'done') {
              if (info?.file?.response?.code === 200) {
                message.success('导入成功');
                setData({
                  emptyStations:
                    info?.file?.response?.data?.emptyStations ?? [],
                  heavyStations:
                    info?.file?.response?.data?.heavyStations ?? [],
                });
              }
            }
          }}
        >
          <Button type="primary" size="small">
            导入
          </Button>
        </Upload>
        <Button type="primary" size="small" onClick={handleExport}>
          导出
        </Button>
        <Button
          type="primary"
          size="small"
          onClick={() => window.open('/logistics/station_template.xls')}
        >
          模板下载
        </Button>
      </header>
      <section className={styles.section}>
        <div className={styles.sectionItem}>
          <Stations
            type={0}
            dataSource={data.emptyStations}
            onChange={(_stations) => {
              setData({
                ...data,
                emptyStations: _stations,
              });
            }}
          />
        </div>
        <div className={styles.sectionItem}>
          <Stations
            type={1}
            dataSource={data.heavyStations}
            onChange={(_stations) => {
              setData({
                ...data,
                heavyStations: _stations,
              });
            }}
          />
        </div>
      </section>
      <footer className={styles.footer}>
        <Button type="primary" onClick={handleSave}>
          保存
        </Button>
      </footer>
    </div>
  );
};

export default StationInfo;
